<template>
  <q-select v-model="_value" style="width: 100%">
    <q-option
      v-for="option in options"
      :key="option.id"
      :label="option.label"
      :value="option.id"
    />
  </q-select>
</template>

<script>
import { defineComponent, computed } from '@vue/composition-api';

export default defineComponent({
  name: 'SelectSetter',
  props: {
    value: {
      type: String,
      default: '',
    },
    onChange: {
      type: Function,
      default: () => {},
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {
    return {
      _value: computed({
        get: () => props.value,
        set: (value) => props.onChange(value),
      }),
    };
  },
});
</script>
